<template>
  <view class="navigation">
    <eui-navbar ref="EuiNavBar" title="今日工单" displayable="true" titleIcon="icon-sanjiaojiantouxiangxia" rightIcon="" rightIcon5="icon-paiming"
                color="#000000" backgroundColor="#FFFFFF" :showPopup="false" @onClickTitle="openCalendar" @clickRight="clickNavbarRight"/>
    <view class="tab-view">
      <view class="tab-item" v-for="(item, index) in tabData" :key="index" @click="tabChange(item, index)">
        <view class="tab-detail">
          <text :class="{ 'tab-index': index === tabIndex, [theme]: true }">{{ item.name }}</text>
          <view v-if="index === tabIndex" class="tab-line" :class="[theme]" />
        </view>
        <view class="tab-circle-common-view" :class="{ 'tab-circle-index-view': index === tabIndex, [theme]: true }">
          <text>{{ item.corner }}</text>
        </view>
      </view>
    </view>
    <view class="main-view" :style="{ height: scrollHeight + 'rpx' }">
      <eui-virtual-list v-if="dataList.length > 0" @onRefresh="getData" @lower="templateLower" refresher="true" :origList="dataList"
                        :showHeard="false" type="list">
        <template v-slot:list="scope">
          <view class="item-top">
            <text class="item-top-left">{{ scope.c_task_code }}</text>
            <text class="item-top-right" v-if="tabIndex === 2">预估 <text style="color: #000000;font-weight: 600;margin-right: 6rpx">{{ scope.c_time }}分钟</text>
              {{ dayjs(scope.c_plan_begin_time).format('HH:mm') }}~{{ dayjs(scope.c_require_complete_time).format('HH:mm') }}</text>
            <text class="item-top-right" v-else>预估 <text style="color: #000000;font-weight: 600;margin-right: 6rpx">{{ scope.c_time }}分钟</text> 实际 <text style="color: #000000;font-weight: 600;margin-right: 6rpx">
              {{ scope.c_total_time }}分钟</text> {{ dayjs(scope.c_plan_begin_time).format('HH:mm') }}~{{ dayjs(scope.c_require_complete_time).format('HH:mm') }}</text>
          </view>
          <view class="item-center">
            <text class="item-detail">{{ scope.c_title }}</text>
            <text class="item-tips">{{ scope.c_depiction }}</text>
          </view>
          <view class="item-bottom">
            <view class="item-bottom-left">
              <eui-status v-if="scope.c_level_name" :type="scope.levelStyle" :title="scope.c_level_name" />
              <!--<eui-status v-if="scope.c_adno_name" type="add1_mini" :title="scope.c_adno_name" />-->
              <eui-status v-if="scope.c_importance_name" :type="scope.importanceStyle" :title="scope.c_importance_name" />
              <eui-status v-if="scope.c_timeliness_name" :type="scope.timelinesStyle" :title="scope.c_timeliness_name" />
            </view>
            <text class="item-bottom-right" v-if="tabIndex === 0">处理人 <text style="color: #000000; margin-right: 6rpx">{{ scope.c_allocation_username }}</text>
              {{ dayjs(scope.c_modify_dt).format('YYYY-MM-DD HH:mm') }}</text>
            <text class="item-bottom-right" v-if="tabIndex === 1">分配人 <text style="color: #000000; margin-right: 6rpx">{{ scope.c_allocation_username }}</text>
              {{ dayjs(scope.c_allocation_dt).format('YYYY-MM-DD HH:mm') }}</text>
            <text class="item-bottom-right" v-if="tabIndex === 2">接收人 <text style="color: #000000; margin-right: 6rpx">{{ scope.c_allocation_username }}</text>
              {{ dayjs(scope.c_mk_dt).format('YYYY-MM-DD HH:mm') }}</text>
          </view>
        </template>
      </eui-virtual-list>
      <view v-else class="temp-view">
        <image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
        <view class="no-data-text">暂无工单</view>
      </view>
    </view>
    <view v-if="showCalendar" class="calendar-view" :style="{ height: calendarHeight + 'rpx', top: calendarTop + 'rpx' }">
      <eui-calendar :clearDate="false" :insert="true" :showMonth="false"
                    :date="calendarDate" @change="chooseDate"/>
      <view class="mask-view" @click="closeCalendar" />
    </view>
  </view>
</template>

<script setup type="ts">
import { storeToRefs } from 'pinia';
import {computed, onMounted, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getRdsSysConfig, init} from "@/hooks/init";
import { getRelatedName, getDictName, getUserDictSelectList, getDictSelect, getDictSelectList, getWeightUnits, getDictList } from '../../components/RelatedName.js';
import Enjoy from "@/common/enjoy";
import { getRdsUrl, rdsRequest } from "@/hooks/rdsServices";
import {useMainStore} from "@/store/modules/store";
import {useLoginStore} from "@/store/modules/useLoginStore";
import TaskGround from '../components/taskGroup.vue'
import dayjs from 'dayjs';
import Guid from '@/common/guid';
import service from "@/common/service";
import useService from '@/hooks/useService';
import useUpload from "@/hooks/useUpload";
import { useThemeStore } from '@/store/themeStore';
import dateRangUtil from "@/common/dateRangUtil";
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);

const mainService = useService({ prefix: "mainApi" });
const { upload, remove, fetchFile } = useUpload({ prefix: 'mainApi' });
const rdsUrl = getRdsUrl();
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const LoginStore = useLoginStore();
const sUserStore = ref('');
const sUserStoreName = ref('');
const sUser = ref('');

const scrollHeight = ref(0);
// 日期弹框
const calendarHeight = ref(0);
const calendarTop = ref(0);
const showCalendar = ref(false);
const calendarDate = ref('');

// tab标签
const tabData = ref([{ name: '完成单', corner: 0 }, { name: '指派单', corner: 0 }, { name: '转单', corner: 0 }]);
const tabIndex = ref(0);
const spaceLeft = ref(6);
// 列表数据
const dataList = ref([]);
const confirmTaskList = ref([]); // 完成单
const targetTaskList = ref([]); // 指派单
const returnTaskList = ref([]); // 转单

// 获取列表高度
const getListHeight = async () => {
  await uni.getSystemInfo({
    success: function (res) {
      let info = uni.createSelectorQuery().select(".main-view");
      info.boundingClientRect(function (data) {
        //获取列表高度
        let height = res.windowHeight - data.top;
        //转换rpx
        scrollHeight.value = height / (res.windowWidth / 750) - 20;
      }).exec();
      // 日历高度
      let info2 = uni.createSelectorQuery().select(".tab-view");
      info2.boundingClientRect(function (data) {
        let height = res.windowHeight - data.top;
        calendarTop.value = data.top / (res.windowWidth / 750);
        calendarHeight.value = height / (res.windowWidth / 750);
      }).exec();
    }
  });
};

const setDefault = async () => {
  sUserStore.value = loginInfo.sUserStore;
  sUserStoreName.value = loginInfo.sUserStoreName;
  sUser.value = loginInfo.sUser;
  calendarDate.value = dateRangUtil.getCurrentTime();
}

onLoad(async () => {
  await setDefault();
  await getData();
})

onMounted((e) => {
  getListHeight();
});

const getData = async () => {
  service.enjoyShowLoading('正在加载...');
  await getCompletedTasks(); // 已完成
  await getToDoTasks(); // 指派单
  await getDeliveredTasks(); //转单
  if (tabIndex.value === 1) {
    // 指派单
    dataList.value = targetTaskList.value;
  } else if (tabIndex.value === 2) {
    // 转单
    dataList.value = returnTaskList.value;
  } else {
    // 完成单
    dataList.value = confirmTaskList.value;
  }
  service.enjoyHideLoading();
}

// 完成单
const getCompletedTasks = async () => {
  let req = {
    c_modify_dt: dayjs(calendarDate.value).format('YYYY-MM-DD'),
  }
  const result = await rdsRequest(rdsUrl.mainApi, 'tasktodo', 'FetchCompletedTasks', req);
  let list = JSON.parse(JSON.stringify(result));
  list.forEach(x => {
    x.levelStyle = getStatusStyle(x.c_level); // 等级
    x.importanceStyle = getStatusStyle(x.c_importance);  // 重要性
    x.timelinesStyle = getStatusStyle(x.c_timeliness); // 时效性
  })
  // 完成单
  confirmTaskList.value = list.filter(x => x.c_progress >= 100);
  // 刷新角标
  tabData.value[0].corner = confirmTaskList.value.length;
}

// 指派单
const getToDoTasks = async () => {
  let req = {
    c_allocation_dt: dayjs(calendarDate.value).format('YYYY-MM-DD'),
  }
  const result = await rdsRequest(rdsUrl.mainApi, 'tasktodo', 'FetchToDoTasks', req);
  let list = JSON.parse(JSON.stringify(result));
  list.forEach(x => {
    x.levelStyle = getStatusStyle(x.c_level); // 等级
    x.importanceStyle = getStatusStyle(x.c_importance);  // 重要性
    x.timelinesStyle = getStatusStyle(x.c_timeliness); // 时效性
  })
  // 指派单
  targetTaskList.value = list.filter(x => x.c_progress >= 0 && x.c_progress < 100 && x.c_distribute_mode === 'D0');
  // 刷新角标
  tabData.value[1].corner = targetTaskList.value.length;
}

// 转单
const getDeliveredTasks = async () => {
  let req = {
    c_fetch_date: dayjs(calendarDate.value).format('YYYY-MM-DD'),
  }
  const result = await rdsRequest(rdsUrl.mainApi, 'taskdelivertodo', 'FetchDeliveredTasks', req);
  let list = JSON.parse(JSON.stringify(result));
  list.forEach(x => {
    x.levelStyle = getStatusStyle(x.c_level); // 等级
    x.importanceStyle = getStatusStyle(x.c_importance);  // 重要性
    x.timelinesStyle = getStatusStyle(x.c_timeliness); // 时效性
  })
  // 转单
  returnTaskList.value = list;
  // 刷新角标
  tabData.value[2].corner = returnTaskList.value.length;
}

// 上拉加载更多
const templateLower = () => {

}

// 点击tab
const tabChange = (item, index) => {
  if (tabIndex.value === index) return;
  tabIndex.value = index;
  if (index === 1) {
    // 指派单
    dataList.value = targetTaskList.value;
  } else if (index === 2) {
    // 转单
    dataList.value = returnTaskList.value;
  } else {
    // 完成单
    dataList.value = confirmTaskList.value;
  }
  getData();
}

// 点击navbar标题
const openCalendar = () => {
  showCalendar.value = !showCalendar.value;
}
const chooseDate = (e) => {
  calendarDate.value = e.fulldate;
  getData();
  showCalendar.value = false;
}

// 关闭日历
const closeCalendar = () => {
  showCalendar.value = false;
}

// 点击navbar右侧图标
const clickNavbarRight = () => {
  uni.navigateTo({
    url: `./abilityRank`
  });
}

// 状态显示的样式
const getStatusStyle = (e) => {
  switch (e) {
    case '1':  //等级: 初级
    case 'I2':  //重要性: 一般
    case 'T2':  //时效性: 不紧急
      return 'primary_mini';
    case '2':  //等级: 中级
    case 'I1':  //重要性: 比较重要
    case 'T0':  //时效性: 一般
      return 'warning_mini';
    case '3':  //等级:高级
    case 'I0':  //重要性: 重要
    case 'T1':  //时效性: 紧急
      return 'error_mini';
    default:
      return 'primary_mini';
  }
}


</script>

<style lang="scss" scoped>
@import '@/main.scss';
@import '@/uni.scss';

.navigation {
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  background: #F2F2F2;
  position: relative;
}

.tab-view {
  width: 100%;
  height: 88rpx;
  background: #FFFFFF;
  display: flex;
  flex-direction: row;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: $uni-font-family;
    text-align: right;
    font-style: normal;
    font-weight: $uni-font-weight-level1;
    font-size: $uni-font-size-level4;
    color: $uni-text-color-title;
    line-height: 37rpx;
    position: relative;

    .tab-detail {
      position: relative;
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .tab-index {
      font-weight: $uni-font-weight-level3;
      font-size: $uni-font-size-level2;
      color: var(--theme-color);
      line-height: 42rpx;
    }

    .tab-line {
      width: 30rpx;
      height: 6rpx;
      background: var(--theme-color);
      border-radius: 3rpx;
      margin-top: 8rpx;
      position: absolute;
      bottom: 10rpx;
    }

    .tab-circle-common-view {
      width: auto;
      min-width: 32rpx;
      height: 32rpx;
      background: rgba(136, 136, 136, 0.05);
      border-radius: 16rpx;
      margin-top: -15rpx;
      padding: 2rpx 8rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: $uni-font-family;
      font-weight: $uni-font-weight-level1;
      font-size: $uni-font-size-level7;
      color: $uni-text-color-hint;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }

    .tab-circle-index-view {
      color: var(--theme-color);
      background: var(--theme-bgc-light);
    }
  }
}

.main-view {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  position: relative;
  flex-direction: column;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.item-top {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  font-family: $uni-font-family;
  text-align: left;
  font-style: normal;

  .item-top-left {
    flex: 1;
    display: flex;
    font-weight: $uni-font-weight-level3;
    font-size: $uni-font-size-level1;
    color: $uni-text-color-title;
    line-height: 45rpx;

  }

  .item-top-right {
    font-weight: $uni-font-weight-level1;
    font-size: $uni-font-size-level7;
    color: $uni-text-color-hint;
    line-height: 28rpx;
  }
}

.item-center {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.item-detail {
  font-family: $uni-font-family;
  text-align: left;
  font-style: normal;
  font-weight: $uni-font-weight-level3;
  font-size: $uni-font-size-level3;
  color: $uni-text-color-primary;
  line-height: 39rpx;
  margin-top: 20rpx;
}

.item-tips {
  font-family: $uni-font-family;
  text-align: justify;
  font-style: normal;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level7;
  color: $uni-text-color-hint;
  line-height: 30rpx;
  margin-top: 12rpx;
}

.item-bottom {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 36rpx;
  margin-top: 20rpx;
  align-items: center;

  .item-bottom-left {
    flex: 1;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    flex-direction: row;
    margin-right: 20rpx;
  }

  .item-bottom-right {
    font-weight: $uni-font-weight-level1;
    font-size: $uni-font-size-level8;
    color: $uni-text-color-hint;
    line-height: 28rpx;
  }
}

// 日历
.calendar-view {
  position: fixed;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;

  .mask-view {
    display: flex;
    flex: 1;
    background: $uni-bg-color-mask;
  }
}

// 空列表
.temp-view {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.image-min {
  width: 100%;
  height: 250rpx;
}

.no-data-text {
  text-align: center;
  color: $uni-text-color-hint;
  font-size: $uni-font-size-level3;
  margin-top: 10rpx;
}

</style>
